CSS 카운터 스타일 언어 지원: 글로벌 사용자를 위한 국제화 서식

오늘날의 글로벌 연결된 세계에서 웹 개발자는 다양한 사용자를 대상으로 하는 웹사이트와 애플리케이션을 만들어야 합니다. 이는 언어뿐만 아니라 다양한 지역에서 사용되는 문화적 관습과 번호 매기기 시스템을 고려해야 함을 의미합니다. CSS 카운터 스타일은 이러한 문화적 뉘앙스를 존중하는 방식으로 목록 및 기타 번호가 매겨진 콘텐츠의 서식을 지정하는 강력한 메커니즘을 제공합니다. 이 포괄적인 가이드는 국제화(i18n)를 위한 CSS 카운터 스타일의 기능을 살펴보고 이를 효과적으로 사용하는 방법을 보여줍니다.

CSS 카운터 스타일 이해

CSS 카운터는 사용 횟수를 추적하기 위해 CSS 규칙에 의해 유지 관리되는 변수입니다. 주로 목록, 제목 및 기타 요소에 번호를 매기는 데 사용됩니다. CSS 카운터 스타일은 표준 아라비아 숫자 및 로마 숫자 외에 사용자 지정 번호 매기기 시스템을 정의할 수 있도록 하여 이 기능을 확장합니다. 이는 다양한 언어와 문화적 선호도를 지원하는 데 매우 중요합니다.

카운터 스타일을 사용하는 데 관련된 핵심 CSS 속성은 다음과 같습니다.

• counter-reset: 카운터를 특정 값으로 초기화하거나 재설정합니다.
• counter-increment: 카운터 값을 증가시킵니다.
• content: 카운터 값을 표시하기 위해 ::before 또는 ::after 가상 요소와 함께 사용됩니다.
• counter() 또는 counters(): 카운터 값을 서식 지정하기 위해 content 속성 내에서 사용되는 함수입니다.
• @counter-style: 서식을 제어하기 위한 다양한 속성을 사용하여 사용자 지정 카운터 스타일을 정의합니다.

@counter-style의 힘

@counter-style 규칙은 CSS 카운터 스타일 국제화의 핵심입니다. 카운터 값이 렌더링되는 방식을 제어하는 다양한 속성을 사용하여 사용자 지정 번호 매기기 시스템을 정의할 수 있습니다. @counter-style 규칙 내의 주요 속성을 살펴보겠습니다.

• system: 카운터 표현을 생성하는 데 사용되는 알고리즘을 지정합니다. 일반적인 값으로는 cyclic, numeric, alphabetic, symbolic, fixed 및 additive가 있습니다.
• symbols: 숫자, 문자 또는 사용자 지정 문자와 같은 카운터 스타일에서 사용되는 기호를 정의합니다.
• additive-symbols: additive 시스템과 함께 사용하여 기호와 해당 숫자 값을 정의합니다.
• suffix: 각 카운터 표현 뒤에 추가되는 텍스트를 지정합니다(예: 마침표 또는 닫는 괄호).
• prefix: 각 카운터 표현 앞에 추가되는 텍스트를 지정합니다.
• range: 카운터 스타일이 적용 가능한 값의 범위를 제한합니다.
• pad: 필요한 경우 선행 0으로 채워 사용할 최소 자릿수를 지정합니다.
• speak-as: 접근성을 위해 화면 판독기가 카운터 값을 알리는 방식을 제어합니다.
• fallback: 브라우저에서 현재 스타일을 지원하지 않는 경우 사용할 대체 카운터 스타일을 지정합니다.

@counter-style을 사용한 국제화 예제

이제 @counter-style을 사용하여 다양한 언어 및 문화적 맥락에 맞게 카운터 서식을 지정하는 실제 예제를 살펴보겠습니다.

1. 아라비아-인도 숫자와 함께하는 아라비아 숫자

아라비아 숫자(0-9)가 널리 사용되지만 많은 아랍어 사용 지역에서는 아라비아-인도 숫자(٠‎-٩‎)를 사용하는 것을 선호합니다. 이를 달성하기 위해 카운터 스타일을 만들 수 있습니다.

@counter-style arabic-indic {
  system: numeric;
  symbols: '٠' '١' '٢' '٣' '٤' '٥' '٦' '٧' '٨' '٩';
  suffix: '. ';
}

ol {
  list-style: none;
  counter-reset: item;
}

ol li {
  counter-increment: item;
}

ol li::before {
  content: counter(item, arabic-indic);
}

이 코드는 아라비아-인도 숫자를 기호로 사용하는 arabic-indic라는 카운터 스타일을 정의합니다. suffix 속성은 각 숫자 뒤에 마침표와 공백을 추가합니다. 그런 다음 CSS는 이 스타일을 정렬된 목록(<ol>)에 적용하여 숫자를 아라비아-인도 형식으로 표시합니다.

2. 로마 숫자(대문자 및 소문자)

로마 숫자는 다양한 맥락에서 일반적으로 사용되며 CSS 카운터 스타일은 이를 쉽게 처리할 수 있습니다.

@counter-style upper-roman {
  system: upper-roman;
}

@counter-style lower-roman {
  system: lower-roman;
}

ol.upper-roman {
  list-style: none;
  counter-reset: item;
}

ol.upper-roman li {
  counter-increment: item;
}

ol.upper-roman li::before {
  content: counter(item, upper-roman) '. ';
}

ol.lower-roman {
  list-style: none;
  counter-reset: item;
}

ol.lower-roman li {
  counter-increment: item;
}

ol.lower-roman li::before {
  content: counter(item, lower-roman) '. ';
}

이 예제에서는 대문자(upper-roman) 및 소문자(lower-roman) 로마 숫자 카운터 스타일을 모두 만드는 방법을 보여줍니다. 그런 다음 CSS 클래스(.upper-roman 및 .lower-roman)를 사용하여 이러한 스타일을 다른 목록에 적용할 수 있습니다. 예를 들면 다음과 같습니다.

<ol class="upper-roman">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ol>

<ol class="lower-roman">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ol>

3. 그루지야 숫자

그루지야 숫자는 고유한 문자 시스템을 사용합니다. 그루지야어로 숫자를 나타내는 카운터 스타일을 정의할 수 있습니다.

@counter-style georgian {
  system: fixed;
  symbols: 'ა' 'ბ' 'გ' 'დ' 'ე' 'ვ' 'ზ' 'თ' 'ი' 'კ' 'ლ' 'მ' 'ნ' 'ო' 'პ' 'ჟ' 'რ' 'ს' 'ტ' 'უ' 'ფ' 'ქ' 'ღ' 'ყ' 'შ' 'ჩ' 'ც' 'ძ' 'წ' 'ჭ' 'ხ' 'ჯ' 'ჰ';
  suffix: '. ';
  range: 1 33;
}

ol.georgian {
  list-style: none;
  counter-reset: item;
}

ol.georgian li {
  counter-increment: item;
}

ol.georgian li::before {
  content: counter(item, georgian);
}

이 예제에서는 그루지야 번호 매기기 시스템이 처음 33개의 숫자에 대한 제한된 기호 세트를 가지고 있기 때문에 fixed 시스템을 사용합니다. range 속성은 카운터 스타일을 1에서 33 사이의 값으로 제한합니다. 33보다 큰 숫자의 경우 더 복잡한 논리 또는 다른 번호 매기기 시스템을 구현해야 합니다.

4. 아르메니아 숫자

그루지야와 마찬가지로 아르메니아 숫자도 문자를 사용하여 숫자를 나타냅니다.

@counter-style armenian {
  system: fixed;
  symbols: 'Ա' 'Բ' 'Գ' 'Դ' 'Ե' 'Զ' 'Է' 'Ը' 'Թ' 'Ժ' 'Ի' 'Լ' 'Խ' 'Ծ' 'Կ' 'Հ' 'Ձ' 'Ղ' 'Ճ' 'Մ' 'Յ' 'Ն' 'Շ' 'Ո' 'Չ' 'Պ' 'Ջ' 'Ռ' 'Ս' 'Վ' 'Տ' 'Ր' 'Ց' 'Ւ' 'Փ' 'Ք' 'Օ' 'Ֆ';
  suffix: '. ';
  range: 1 39;
}

ol.armenian {
  list-style: none;
  counter-reset: item;
}

ol.armenian li {
  counter-increment: item;
}

ol.armenian li::before {
  content: counter(item, armenian);
}

이 예제는 그루지야 예제와 유사하며 fixed 시스템을 사용하고 아르메니아 문자를 기호로 정의합니다. range는 기본 아르메니아 숫자 세트를 포함하여 1-39로 설정됩니다.

5. CJK 숫자(중국어, 일본어, 한국어)

CJK 숫자는 공식 및 비공식 컨텍스트에 대한 다양한 형태와 다양한 수준의 세분성으로 인해 더 복잡합니다. 중국어 간체를 살펴보겠습니다.

@counter-style simplified-chinese {
  system: numeric;
  symbols: '一' '二' '三' '四' '五' '六' '七' '八' '九';
  suffix: '';
}

@counter-style simplified-chinese-formal {
  system: fixed;
  symbols: '零' '壹' '贰' '叁' '肆' '伍' '陆' '柒' '捌' '玖';
  suffix: '';
}

ol.simplified-chinese {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese li {
  counter-increment: item;
}

ol.simplified-chinese li::before {
  content: counter(item, simplified-chinese) '、';
}

ol.simplified-chinese-formal {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese-formal li {
  counter-increment: item;
}

ol.simplified-chinese-formal li::before {
  content: counter(item, simplified-chinese-formal) '、';
}

이것은 단순화된 표현입니다. 특히 큰 숫자에 대한 완전한 CJK 숫자 지원은 additive 시스템과 자리수(십, 백, 천 등) 처리를 포함하는 보다 복잡한 구현이 필요합니다. 이 코드는 기본 숫자 표현을 보여줍니다.

고급 기술 및 고려 사항

1. 카운터 스타일 결합

여러 카운터 스타일을 결합하여 더 복잡한 번호 매기기 체계를 만들 수 있습니다. 예를 들어 각 장의 장에 대한 기본 카운터와 섹션에 대한 보조 카운터를 사용할 수 있습니다.

body {
  counter-reset: chapter section;
}

h1 {
  counter-increment: chapter;
  counter-reset: section;
}

h2 {
  counter-increment: section;
}

h1::before {
  content: counter(chapter) '. ';
}

h2::before {
  content: counter(chapter) '.' counter(section) '. ';
}

이 코드는 장에 순차적으로 번호가 매겨지고 섹션은 각 장 내에 번호가 매겨지는 계층적 번호 매기기 시스템을 만듭니다(예: 1.1, 1.2, 2.1, 2.2).

2. 접근성 고려 사항

카운터 스타일이 장애가 있는 사용자가 액세스할 수 있는지 확인합니다. speak-as 속성을 사용하여 화면 판독기가 카운터 값을 알리는 방식을 제어합니다. 예를 들면 다음과 같습니다.

@counter-style my-style {
  system: numeric;
  symbols: '1' '2' '3';
  speak-as: numbers;
}

speak-as: numbers; 속성은 화면 판독기에게 카운터 값을 숫자로 알리도록 지시합니다. 다른 옵션으로는 spell-out(숫자를 철자하는 경우) 및 bullets(카운터를 글머리 기호로 알리는 경우)가 있습니다.

또한 시각 장애가 있는 사용자가 번호가 매겨진 콘텐츠의 의미를 이해할 수 있도록 카운터 스타일에 사용된 사용자 지정 기호에 대한 대체 텍스트 또는 설명을 제공합니다.

3. 브라우저 호환성

CSS 카운터 스타일은 최신 브라우저에서 널리 지원되지만 이전 브라우저 버전을 고려하는 것이 필수적입니다. 브라우저가 기본 스타일을 지원하지 않는 경우 사용할 대체 카운터 스타일을 지정하려면 fallback 속성을 사용하십시오. 예를 들면 다음과 같습니다.

@counter-style my-style {
  system: cyclic;
  symbols: '✓' '✗';
  fallback: disc;
}

이 예제에서 브라우저가 cyclic 시스템 또는 사용자 지정 기호를 지원하지 않으면 disc 목록 스타일로 대체됩니다.

4. 문화적 감수성

다양한 언어 및 문화에 대한 카운터 스타일을 구현할 때는 문화적 감수성을 염두에 두십시오. 각 지역에서 사용되는 적절한 번호 매기기 규칙 및 기호를 조사합니다. 모욕적이거나 부적절할 수 있는 기호나 형식을 사용하지 마십시오.

예를 들어 일부 문화권에서는 번호 매기기 시스템에서 다른 구두점 기호 또는 구분 기호를 사용하는 것을 선호할 수 있습니다. 카운터 스타일이 이러한 선호도를 존중하는지 확인하십시오.

실용적인 애플리케이션 및 사용 사례

CSS 카운터 스타일은 다음과 같은 다양한 웹 개발 시나리오에서 사용할 수 있습니다.

• 목차 생성: 목차에서 제목과 부제목에 자동으로 번호를 매깁니다.
• 번호가 매겨진 목록 만들기: 다양한 언어와 스타일로 번호가 매겨진 목록의 서식을 지정합니다.
• 튜토리얼에서 단계 번호 매기기: 명확하고 시각적으로 매력적인 번호 매기기로 일련의 단계를 안내합니다.
• 사용자 지정 페이지 매김 구현: 고유한 번호 매기기 체계를 사용하여 사용자 지정 페이지 매김 컨트롤을 만듭니다.
• 순위가 매겨진 목록 표시: 다양한 카운터 스타일을 사용하여 시각적으로 매력적인 방식으로 순위를 표시합니다.
• 법률 문서 생성: 특정 번호 매기기 요구 사항이 있는 법률 문서의 서식을 지정합니다.
• 과학 논문 서식 지정: 적절한 번호 매기기로 방정식, 그림 및 표를 표시합니다.

CSS 카운터 스타일 사용에 대한 모범 사례

CSS 카운터 스타일이 효과적이고 유지 관리 가능하도록 하려면 다음 모범 사례를 따르십시오.

• 카운터 스타일에 대한 설명적인 이름 사용: 스타일의 목적과 서식을 명확하게 나타내는 이름을 선택합니다(예: arabic-indic, upper-roman, georgian).
• 카운터 스타일을 모듈식으로 유지: 다양한 언어 및 번호 매기기 시스템에 대해 별도의 카운터 스타일을 정의합니다.
• CSS 클래스를 사용하여 카운터 스타일 적용: 카운터 스타일을 요소에 직접 적용하지 말고 CSS 클래스를 사용하여 서식을 제어합니다.
• 카운터 스타일을 철저히 테스트: 다양한 브라우저와 장치에서 카운터 스타일을 테스트하여 올바르게 렌더링되는지 확인합니다.
• 카운터 스타일 문서화: 목적, 서식 및 사용법을 포함하여 카운터 스타일에 대한 명확한 문서를 제공합니다.
• 접근성 우선시: 카운터 스타일을 만들 때 항상 접근성을 고려하고 speak-as 속성을 사용하여 화면 판독기가 카운터 값을 올바르게 알리도록 합니다.

결론

CSS 카운터 스타일은 웹에서 번호가 매겨진 콘텐츠의 서식을 국제화하는 강력하고 유연한 메커니즘을 제공합니다. @counter-style 규칙과 다양한 속성을 활용하여 다양한 지역의 문화적 규칙과 언어적 뉘앙스를 존중하는 사용자 지정 번호 매기기 시스템을 만들 수 있습니다. 이 가이드에 설명된 모범 사례를 따르면 카운터 스타일이 효과적이고 유지 관리 가능하며 전 세계 사용자가 액세스할 수 있는지 확인할 수 있습니다. 웹 개발이 계속 발전함에 따라 국제화를 위해 CSS 카운터 스타일을 이해하고 활용하는 것은 진정으로 포괄적이고 사용자 친화적인 웹 경험을 만드는 데 점점 더 중요해질 것입니다. CSS 카운터 스타일의 힘을 받아들이고 전 세계 모든 곳의 사용자와 공감하는 웹사이트를 만드십시오.

추가 자료

• MDN Web Docs: @counter-style
• CSS Counter Styles Level 3
• A Complete Guide to CSS Counter Styles